<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="my_aside">
        <Aside></Aside>
      </el-aside>
      <el-container>
        <el-header class="my_header">
          <Header />
        </el-header>
        <el-main>Main</el-main>
        <el-footer class="my_footer">
          <Footer />
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import Aside from "@/components/Aside.vue";

export default {

  name: 'index',
  components: {
    Header,
    Footer,
    Aside
  }
};
</script>
<style scoped>
.my_aside {
  width: 200px;
  height: 100vh;
  background-color: #545c64;
  color: #fff;
}

.my_header {
  height: 60px;
  background-color: #545c64;
  color: #fff;
  display: flex;
  align-items: center;
}

.my_footer {
  height: 30px;
  background-color: #545c64;
  color: #fff;
  display: flex;
  align-items: center;
}
</style>